<style>
.cus-form {
  /*--my-dialog-z-index: 10;*/
}
</style>

<template>
  <div class="cus-form" v-if="page.inited">
    <div hidden>{{store.model}}</div>
    <HttpComponent
        :defs="page.defMap"
        :pre-slot="form_slot_content"
        :is="store.model.editor_step"
    >

      <template #array_con_beforeend="scope">
        <el-button size="small" v-if="checkComNeeds(scope, 'showDelBtn')" type="danger"
                   @click="page.callEvent('del:part', scope)"
        >删除{{ scope.key }}</el-button>
      </template>
      <template #array_afterbegin="scope">
        <template v-if="checkComNeeds(scope, 'showAddBtn')">
          <el-button size="small"
              @click="page.callEvent('add:part', scope)"
          >添加{{ scope.key }}</el-button>
        </template>
      </template>
    </HttpComponent>
  </div>

</template>
<script>

import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import HttpComponent from "@/components/HttpComponent.vue";
import {extendControl2Page, useControl} from "@/mixins/framework";
import { nextTick, onMounted, provide} from 'vue';


export default {
  name: 'CusForm',
  components: {HttpComponent},
  mixins: [
    CustomRenderControlMixin
  ],
  props: {
    configUrl: {
      type: String,
      default: '/formEditorConfig.js'
    }
  },
  setup(props, ctx) {
    // let instanse = getCurrentInstance()
    import('@/plugins/form-render/ext2').then(res  => {
      res.registerExt2();
    })

    let locks = true
    let cached = null
    let cachedModel = null
    let { methods, init, data, widgetConfig2, curFormCon } = defineCustomRender(props, ctx, {
      handleValueInit(newVal) {
        // console.log('cusform', newVal, typeof newVal)
        if (typeof newVal !== 'undefined') {
          try {
            cached = ZY.JSON5.parse(newVal);
            onInitValue();
          } catch (e) {
            console.error(new Error('json parse err', {
              cause: e
            }))
          }
        } else  {

        }
        return newVal
        // page.setPartModel('form-editor', 'form2', obj)
      }
    })
    data({
    })
    let properties =  {
      editor_step: {
        type: String,
      },
      json: {
        type: String,
      },
      dialog_open: {
        type: Boolean
      },
      loaded: {
        type: Boolean
      },
      dialogVisible: {
        type: Boolean
      }
    }
    let dialogName = 'cus_form_dialog_' + ZY.rid(6)
    let computed = {}
    function onInited({storeControl}) {
    }
    if (widgetConfig2.debug) {
      console.log(props.form_slot_content)
    }
    let page = useControl({properties, computed}, {
      onInited,
      extendContext: {
      }
    })
    page = extendControl2Page(page)

    function onInitValue() {
      let _configUrl = props.configUrl
      if (widgetConfig2.configUrl) {
        _configUrl = widgetConfig2.configUrl
      }
      // let s = urlResolve(import.meta.url, './ass.js')
      // console.log(s);

      page.commonLoadStep(
          /* @vite-ignore */
          globalThis.importScripts(_configUrl),
          'editor_step',
          {
            async onMounted(config, {setPartModel}) {
              self_config = config

              init(props)
              setStepModel = function () {
                if (cached) {
                  setPartModel(config.name, 'form2', cached)
                }
              }
              if (locks) {

                locks = false
                setStepModel()
              }

              // page.setByPath('loaded', true)
              // console.log('sdsdsdsdsdsds')
            }
          }
      )
    }


    page.setEventHandler({
      // ['model:update'](e) {
      //   let {model, key, newVal, config} = e
      // },
      ['add:part'](e) {
        let { parts, partName, pathArr, process } = e
        let s_path = ZY.getObjPathFromPathArr(pathArr)
        parts[partName].arrAppend(s_path)
      },
      ['del:part'](e) {
        let { parts, partName, pathArr, indexKey } = e
        let s_path = ZY.getObjPathFromPathArr(pathArr)
        // console.log(parts[partName], indexKey)
        parts[partName].arrSplice(s_path, indexKey);
      },
      async ['model:update:all'](e) {
        let { model } = e
        cachedModel = model
        // console.log('cusForm model:update:all', e, locks, cachedModel)
        if (!locks) {
          let val = ZY.JSON5.stringify(model)
          // console.log('cus:form model:update:all', model, val)
          page.setData({
            json: val
          })
          await nextTick();
          methods.onChange(val)
        }
      },
    })

    page.onOtherEventHandler = function (type, e) {
      // console.log('onOtherEventHandler', type, e)
      curFormCon.callPageEvent('cusform:event', {
        type,
        e
      })
    }


    provide('CusFormExpose', {
      getModel() {
        return cachedModel
      },
      getPartModel(){
        return cachedModel?.parts[0]
      }
    })

    let setStepModel = null

    let self_config = {}

    onMounted(function () {


      // onInitValue()
      setTimeout(() => {
        // console.log('onMounted', globalThis.INIT_FORM_EMPTY )
        if (globalThis.INIT_FORM_EMPTY) {
          onInitValue()
        }
      }, 150)
    })

    function openDialog() {
      let currentPageWebComponentRef =  globalThis.getCurrentPage('page.webComponentRef')
      if (currentPageWebComponentRef && currentPageWebComponentRef.toggleDialog) {
        currentPageWebComponentRef.toggleDialog(dialogName);
      }
      console.log('formEditorConfig', cached)

      if (!locks) {
        setStepModel()
      }
      page.setByPath('dialog_open', true)
    }

    function onClosed() {
      console.log('onClosed')
    }

    let useDrag = true
    if ( props.ui.widgetConfig.hasOwnProperty('useDrag')) {
      useDrag = props.ui.widgetConfig.useDrag
    }

    // let CurCmField = inject('CurCmField')

    //context.get_SELF_CONFIG('properties.parts.ui.label')
    function getArrItemBeforeKey(scope) {
      // let fieldContext = globalThis.cmFieldContext.get(props.field_uuid)
      // console.log(scope, self_config)

      let c = {
        config: self_config.init.def
      }

      let partCONFIG =  ZY.lodash.get(c, scope.configPath)

      // console.log(partCONFIG)

      let label = ZY.getStrFromObj(partCONFIG, 'ui.label', scope.key)

      return label
    }

    function checkComNeeds(scope, name) {
// console.log(scope)
      let {parts, partName, configPath} = scope
      // console.log(scope)
      // let partPath = configPath.replace('config.parts[0].def.', '')
      let def = parts[partName].getPartConfig(configPath);
      // console.log(parts[partName].rowDef, def)
      if (def?.ui?.controls) {
        return def?.ui?.controls[name]
      }
      return false
    }

    return {
      dialogName,
      widgetConfig: widgetConfig2,
      page,
      checkComNeeds,
      openDialog,
      getArrItemBeforeKey,
      useDrag,
      onClosed,
      store: page.store
    }

  }
}
</script>
